<template>
	<div class="navigator" :style="style">
		<div class="navigator-body" @mouseover="showMenu" @mouseout="hideMenu">
			<div class="title">{{t("the_navigator_menu.title")}}</div>			
			<div class="divide">
				--
			</div>
			<div class="sub-title">
				{{t("the_navigator_menu.sub_title")}}
			</div>
			<solt #title>
				
			</solt>
		</div>

		<div class="navigator-menu-body" :class="state.isShow?'showed':''"  @mouseleave="hideMenu">
			<el-row>
				<el-col :span="6" v-for="(item, index) in menus" style="display:flex">					
					<div class="menu-item" :class="state.activeItem && state.activeItem.id==item.id?'active':''"
					    :style="itemColor(item)"  @click="menuClick(item)"
						   @mouseover="showMenu(item)" 
						   @mouseout="item.isOvered=false">
						<img :src="item.icon" />
						<span class="label">{{item.title}}</span>
					</div>
				</el-col>				
			</el-row>
			
		</div>
	</div>

</template>

<script lang="setup">
	import {
		defineComponent,
		ref,
		reactive,
		onMounted,
		computed,
		onUnmounted
	} from 'vue';

	
	import i18n from "@/i18n/index";

	import international from "@/assets/images/ui/market/global.svg"
	import chinese from "@/assets/images/ui/market/china.svg"


	// 使用特殊的编译宏来指定组件的名称
	export default defineComponent({
		name: 'TheNavigatorMenu',
		
		props:{
			current: {
				type: String,
				default: "",
			},
			menus:{
				type: Object,
				default:[]
			},
			style: {
				type: String,
				default: ""
			},
			color: {
				type: String,
				default: ""
			},
			selected_color: {
				type: String,
				default: ""
			},
			mouseover_color: {
				type: String,
				default: ""
			}		
		},
	
		setup: (props, {
				emit
			}) => {
				
			const t =i18n.global.t;
						
			const itemColor=computed(()=>(item)=>{
				if (item.isOvered && props.mouseover_color){
					return {color:props.mouseover_color};
				}
				if (state.activeItem && state.activeItem.id==item.id){
					if (props.selected_color){
						return {color: props.selected_color};
					}
				}
				if (props.color){
					return {color: props.color};
				}
				return {};
			})

			const state = reactive({
				isShow: false,
				closable: false,
				activeItem: null
			})
			
			onMounted(()=>{
				if (props.menus){
					for (let i=0;i<props.menus.length;i++){
						if (props.menus[i].id==props.current){
							state.activeItem=props.menus[i];
							break;
						}
					}
				}
			});

			let handler = 0;

			const showMenu = (item) => {
				if (handler > 0) {
					clearTimeout(handler);
					handler = 0;
				}		
				if (item){
					item.isOvered=true;
				}
				state.isShow = true;
			}
			
			const hideMenu = (item) => {
				if (item){
					item.isOvered=false;
				}
				if (handler == 0) {
					state.closable=true;
					handler = setTimeout(() => {
						if (state.closable){
							state.isShow = false;
						}
						
						if (handler > 0) {
							clearTimeout(handler);
							handler = 0;
						}
					}, 500);
				}
			}


			const menuClick = (item) => {
				state.isShow = false;

				let _item = {
					id: item.id,
					title: item.title
				}
				
				state.activeItem=item;
				
				emit("menuClick", _item);
			}
			
			return {
				state,
				itemColor,
				t,
				hideMenu,
				showMenu,
				menuClick
			}
		}
	});
</script>

<style scoped lang="scss">
	.navigator {
		width: auto;
		display: block;
		position: relative;

		.navigator-body {
			padding: 5px;
			display: flex;
			position: relative;

			.title {
				font-family: 'Arial Normal', 'Arial', sans-serif;
				font-weight: 400;
				font-style: normal;
				font-size: 13px;
				letter-spacing: normal;

				font-size: 20px;
				color: #A30014;
			}
			
			.divide{
				padding-left: 15px;
				padding-right: 15px;
			}
			
			.sub-title{
				font-family: 'Arial Normal', 'Arial', sans-serif;
				font-weight: 400;
				font-style: normal;
				font-size: 20px;
				letter-spacing: normal;
				color: #333333;
				text-align: left;
				line-height: 30px;
			}

			.current {
				font-size: 14px;
				text-align: left;
				line-height: 30px;
				word-wrap: break-word;
				text-transform: none;
				font-family: 'Arial Normal', 'Arial', sans-serif;
				font-weight: 400;
				font-style: normal;
				letter-spacing: normal;
				color: #333333;

				border-width: 0px;
				width: 65px;
				height: 30px;
				display: flex;
			}

			.image {
				width: 20px;
				padding-left: 5px;
				text-align: right;

				border-width: 0px;
				height: 30px;
				display: flex;
				align-items: center;
			}
		}

		.navigator-menu-body {
			position: absolute;
			top: 46px;
			left: 0px;
			z-index: 10;
			
			width: 540px;
			display:flex;
			
			background-color: #fff;
			box-sizing: border-box;

			background-color: #fff;
			height: 0px;
			text-align: center;
			overflow: hidden;
			
			transition: height .5s ease;

			&.showed {
				min-height: 460px;
				height:auto;

				//border: 1px solid #c1c1c1;
				//border-radius: 5px;
				border-width: 1px;
				border-style: solid;
				border-color: rgba(255, 240, 238, 1);
				border-radius: 50px;
				border-top-left-radius: 0px;
				border-top-right-radius: 0px;
				border-bottom-left-radius: 0px;
				-moz-box-shadow: 5px 5px 5px rgba(255, 240, 238, 1);
				-webkit-box-shadow: 5px 5px 5px rgba(255, 240, 238, 1);				
				box-shadow: 5px 5px 5px rgba(255, 240, 238, 1);
			}

			.menu-item {

				font-size: 16px;
				//border-bottom: 1px solid #f2f2f2;
				color: #666;
				cursor: pointer;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				justify-content: center;

				width: calc(100% - 40px);
				padding: 20px;
				
				&.active{
					color: pink;
				}
				
				&:hover {
					.label{
						color: #CA3E31;
					}
				}

				img {
					border-width: 0px;
					width: 49px;
					height: 36px;
					object-fit: contain;
				}
				
				.label{
					font-size: 20px;
					text-align: center;
					line-height: 30px;
					font-family: 'Arial Normal', 'Arial', sans-serif;
					font-weight: 400;
					font-style: normal;
					font-size: 13px;
					letter-spacing: normal;
					color: #333333;
					width:100%;
					
					white-space: nowrap;
					/*禁止换行*/
					overflow: hidden;
					/*超出隐藏*/
					text-overflow: ellipsis;
					/*省略号*/
				}
			}
		}
	}
</style>